<template>
	<view>
		<view class="fs">
			<view class="val" :class="cla">
				{{val}}
			</view>
		</view>
		<view class="title" :class="cla">
			{{title}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				val:60,
				title:'继续加油吧！',
				cla:''
			}
		},
		methods: {
			
		},
		onLoad(option) {
			let pages = getCurrentPages();
			console.log(pages)
			
			let val = 0;
			if(option.km.substr(1) == '1'){
				val = Number(option.sum);
			}else{
				val = Number(option.sum) * 2;
			}
			this.val = val;
			if(val <= 80){
				this.title = '还差得很远，需要努力了！'
				this.cla = 'a'
			}else if(val <= 90){
				this.title = '快达标了，加油哦！'
				this.cla = 'b'
			}else{
				this.title = '达标了，再接再厉！'
				this.cla = 'c'
			}
			
		}
		
	}
</script>

<style lang="scss">
	
	.val{
		margin: 0 auto;
		margin-top: 80rpx;
		width: 360rpx;
		height: 360rpx;
		line-height: 320rpx;
		font-weight: bold;
		font-size: 220rpx;
		text-align: center;
		border-radius: 100%;
		border: 20rpx solid #000000;
	}
	
	.title{
		margin: 40rpx 0;
		text-align: center;
		font-size: 60rpx;
	}
	
	.a{
		color: #fa0000;
		border-color: #fa0000;
	}
	
	.b{
		color: #FF9900;
		border-color: #FF9900;
	}
	
	.c{
		color: #18B566;
		border-color: #18B566;
	}
	
</style>
